<template>
  <div class="orderDetail">

    <vue-header title="订单详情" :left-options="{backText: ''}">

    </vue-header>

    <div :class="copyItems.order.status==4 ? 'orderDetail-content' : 'orderDetail-content-ld'">
      <loading :isShow="showLoading"></loading>
      <div class="orderDetail-content-status">
        <status v-model="copyItems"></status>
      </div>
      <div class="orderDetail-content-address">

        <addressMod2 v-if="copyItems.order.mailType==99&&items.order.orderTys" v-model="copyItems"></addressMod2>
        <addressMod1 v-if="copyItems.order.mailType!=99&&items.order.orderAddress" v-model="copyItems"></addressMod1>
      </div>
      <div class="orderDetail-content-order">
        <orderList v-model="copyItems"></orderList>
      </div>
      <div class="orderDetail-content-detail">
        <orderDetails v-model="copyItems"></orderDetails>
      </div>
    </div>

    <div class="order-footer" v-if="copyItems.order.status==4">
      <div class="order-footer-but">确认收货</div>
    </div>
  </div>
</template>
<script>
import vueHeader from "@/components/vue-header/index";
import status from "./status";
import addressMod1 from "./address1";
import addressMod2 from "./address2";
import orderList from "./orderList";
import orderDetails from "./detail";
import { orderDetail } from "@/api/order";
import { token_expires } from "@/utils/Keyword";
import loading from "@/components/loading";
//订单状态：0:待付 1：已付 2：取消 3:删除 4：已发货 5:已收货/完成 6 退款完毕 ',
export default {
  name: "orderDetail",
  components: {
    vueHeader,
    status,
    addressMod1,
    addressMod2,
    orderList,
    orderDetails,
    loading
  },
  data() {
    return {
      showLoading: false,
      items: {
        order: {
          orderNo: "",
          goodses: [{ goodsPrice: "" }]
        }
      },
      copyItems: {}
    };
  },
  created() {
    this.copyItems = JSON.parse(JSON.stringify(this.items));
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.showLoading = true;
      this.getDetail();
    },
    getDetail() {
      let params = {
        orderNo: this.$route.query.id
      };

      orderDetail(params).then(res => {
        if (res == token_expires) {
          this.getDetail();
        } else {
          this.assign(this.items, res);
          this.copyItems = this.items;
          this.showLoading = false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.orderDetail {
  background-color: #f0f0f0;
  height: 100%;

  .orderDetail-content-status {
    height: 2.6667rem;
    background-image: url(./../../assets/images/orderDetailBackground.png);
    background-size: 110% 100%;
    background-position-x: -30px;
  }
  .orderDetail-content {
    height: calc(100vh - (46px + 1.3333rem));
    overflow: auto;
  }
  .orderDetail-content-ld {
    height: calc(100vh - 46px);
    overflow: auto;
  }
  .order-footer {
    height: 1.3333rem;
    position: absolute;
    z-index: 100;
    bottom: 0;
    background-color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #ececec;
    .order-footer-but {
      margin-right: 0.32rem;
      width: 1.9733rem;
      height: 34px;
      background: linear-gradient(
        90deg,
        rgba(242, 3, 0, 1),
        rgba(254, 78, 19, 1)
      );
      border-radius: 0.0533rem;
      font-size: 0.3467rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
